<!DOCTYPE html>
<html manifest="index.manifest">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <!-- <link rel="stylesheet" href="./css/bootstrap-theme.min.css"> -->
  <link rel="stylesheet" href="./css/personCss.css">

  <link rel="stylesheet" href="./css/index.css">

  <link media="only screen and (max-width: 770px)" rel="stylesheet" href="./css/index.moblie.css">

  <link media="only screen and (min-width: 771px) and (max-width: 1000px)" rel="stylesheet" href="./css/index.ipad.css">

  <link media="only screen and (min-width: 1001px)" rel="stylesheet" href="./css/index.pc.css">

  <script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="./js/cookie.js"></script>
</head>

<body>
  <!-- 最顶部 -->
  <div id="advice">
    <div class="advice-right col-md-offset-10 col-lg-offset-10 col-xs-offset-10">
      <span><广告></span>
    </div>
  </div>
  <div id="banner-wrap">
    <div id="ul-wrap">
      <ul class="ac-gn-list">
        <li class="show"><img src="./img/show.png" sh='true' alt=""></li>
        <li class="ac-gn-item ac-gn-apple">
          <a class="ac-gn-link ac-gn-link-apple" href="#" id="ac-gn-firstfocus">
					<img class="mdzz" src="./img/apple.PNG" style="z-index:100" alt="">
				</a>
        </li>
        <!-- <li class="ac-gn-item-menu aa"> -->

        </li>
        <li class="ac-gn-item ac-gn-item-menu ac-gn-mac" id="mac">
          <a class="ac-gn-link ac-gn-link-mac" href="#">
					<span class="ac-gn-link-text">Mac</span>
				</a>
        </li>
        <li class="ac-gn-item ac-gn-item-menu ac-gn-ipad">
          <a class="ac-gn-link ac-gn-link-ipad" href="#">
					<span class="ac-gn-link-text">iPad</span>
				</a>
        </li>
        <li class="ac-gn-item ac-gn-item-menu ac-gn-iphone">
          <a class="ac-gn-link ac-gn-link-iphone" href="#">
					<span class="ac-gn-link-text">iPhone</span>
				</a>
        </li>
        <li class="ac-gn-item ac-gn-item-menu ac-gn-watch">
          <a class="ac-gn-link ac-gn-link-watch" href="#">
					<span class="ac-gn-link-text">Watch</span>
				</a>
        </li>
        <li class="ac-gn-item ac-gn-item-menu ac-gn-music">
          <a class="ac-gn-link ac-gn-link-music" href="#">
					<span class="ac-gn-link-text">Music</span>
				</a>
        </li>
        <li class="ac-gn-item ac-gn-item-menu ac-gn-support">
          <a class="ac-gn-link ac-gn-link-support" href="#">
					<span class="ac-gn-link-text">技术支持</span>
				</a>
        </li>
        <li class="ac-gn-item ac-gn-item-menu ac-gn-search" role="search">
          <a class="ac-gn-link ac-gn-link-search" href="#">
					<img src="./img/a2.PNG" style="z-index:100" alt="">
				</a>
        </li>
        <li class="ac-gn-item ac-gn-bag" id="ac-gn-bag">
          <a class="ac-gn-link ac-gn-link-bag" href="#">
					<img src="./img/a1.PNG" style="z-index:100" alt="">
				</a>
          <span class="ac-gn-bagview-caret ac-gn-bagview-caret-large"></span>
          <div class="ac-gn-bag-login">
            <span class="glyphicon glyphicon-triangle-top arrow"></span>
            <p>你的购物袋是空的</p>
            <ul>
              <li><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> <span class="kk">购物袋</span></li>
              <li><span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span> <span class="kk">收藏</span></li>
              <li><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> <span class="kk">订单</span></li>
              <li><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> <span class="kk">账户</span></li>
              <li><span class="glyphicon glyphicon-user" aria-hidden="true"></span> <span class="kk kk1" data-toggle="modal" data-target="#myModal">登录</span></li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <!-- 登陆弹框 -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="gridSystemModalLabel">用户登陆</h4>
        </div>
        <div class="modal-body">
          <form class="form-inline">
            <div class="">
              <div class="" style="width:100px">
                <label for="exampleInputEmail3">UserName:</label>
              </div>
              <input type="text" class="form-control" id="exampleInputEmail3" placeholder="UserName">
            </div>
            <div class="">
              <div style="width:100px">
                <label for="exampleInputPassword3">Password:</label>
              </div>
              <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
            </div>
            <div class="checkbox">
              <label>
              <input type="checkbox" id="chec"> Remember me
              </label>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary">登陆</button>
        </div>
      </div>
    </div>
  </div>
  <div id="iphone8">
    <h2>iPhone 8</h2>
    <h3>新一代iphone。</h3>
    <!-- <img src="img/phone.jpg" alt=""> -->
  </div>

  <div id="iphoneX">
    <h2>iPhone X</h2>
    <h3>hello,未来。</h3>
  </div>
  <div id="watch">
    <h2><img src="./img/phone13.png" alt="">WATCH</h2>
    <p>SERIES 3</p>
    <h3>更自由，更来电。</h3>
  </div>
  </div>
  <div id="ios" class="row">
    <div class="col-xs-12 col-sm-6">
      <div class="ios-left">
        <h2>iOS 11</h2>
        <h3>现已推出。</h3>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6">
      <div class="ios-right">
        <h2>watchOS 4</h2>
        <h3>现已推出。</h3>
      </div>
    </div>
  </div>
  <div id="ipad" class="row">
    <div class="col-xs-12 col-sm-6">
      <div class="ipad-left">
        <h2>iPhone年年换新计划</h2>
        <h3>每年都有一部新iPhone，</h3>
        <h3>并享受AppleCare+全方位服务计划。</h3>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6">
      <div class="ipad-right">
        <h2>macOS High Sierra</h2>
        <h3>现已推出。</h3>
      </div>
    </div>
  </div>
  <footer>
    <div class="row container-fluid">
      <div class="col-xs-12 col-sm-2 col-sm-offset-1">
        <p>选购及了解
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span style="background:black; z-index:100" class="sr-only">Toggle navigation</span>
          <span style="background:black; z-index:100" class="icon-bar"></span>
          <span style="background:black; z-index:100" class="icon-bar"></span>
          </button>
        </p>
        <ul class="foot_2 collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
        </ul>
      </div>
      <div class="col-xs-12 col-sm-2">
        <p>教育应用
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" aria-expanded="false">
          <span style="background:black; z-index:100" class="sr-only">Toggle navigation</span>
          <span style="background:black; z-index:100" class="icon-bar"></span>
          <span style="background:black; z-index:100" class="icon-bar"></span>
          </button>
        </p>
        <ul class="foot_2 collapse navbar-collapse" id="bs-example-navbar-collapse-2">
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
        </ul>
      </div>
      <div class="col-xs-12 col-sm-2">
        <p>商务应用
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3" aria-expanded="false">
          <span style="background:black; z-index:100" class="sr-only">Toggle navigation</span>
          <span style="background:black; z-index:100" class="icon-bar"></span>
          <span style="background:black; z-index:100" class="icon-bar"></span>
          </button>
        </p>
        <ul class="foot_2 collapse navbar-collapse" id="bs-example-navbar-collapse-3">
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
        </ul>
      </div>
      <div class="col-xs-12 col-sm-2">
        <p>账户
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4" aria-expanded="false">
          <span style="background:black; z-index:100" class="sr-only">Toggle navigation</span>
          <span style="background:black; z-index:100" class="icon-bar"></span>
          <span style="background:black; z-index:100" class="icon-bar"></span>
          </button>
        </p>
        <ul class="foot_2 collapse navbar-collapse" id="bs-example-navbar-collapse-4">
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
        </ul>
      </div>
      <div class="col-xs-12 col-sm-2">
        <p>关于Apple
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5" aria-expanded="false">
          <span style="background:black; z-index:100" class="sr-only">Toggle navigation</span>
          <span style="background:black; z-index:100" class="icon-bar"></span>
          <span style="background:black; z-index:100" class="icon-bar"></span>
          </button>
        </p>
        <ul class="foot_2 collapse navbar-collapse" id="bs-example-navbar-collapse-5">
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
          <li><a href="#">mac</a></li>
        </ul>
      </div>
      <div class="col-xs-12 col-sm-10 col-sm-offset-1">
        <p id="foot_text">更多选购方式：前往<a href="#"> Apple Store </a>零售店，致电 400-666-8800 或查找在你附近的<a href="#"> 授权经销商 </a>。</p>
      </div>
      <div class="col-xs-12 col-sm-4 col-sm-offset-1">
        <p id="foot_text_1">Copyright © 2017 Apple Inc. 保留所有权利。</p>
      </div>
      <div class="col-xs-12 col-sm-4">
        <p id="foot_text_2"><a href="#">隐私政策</a>|<a href="#">使用条款</a>|<a href="#">销售政策</a>|<a href="#">法律信息</a>|<a href="#">网站地图</a></p>
      </div>
      <div class="col-xs-12 col-sm-1 col-sm-offset-1">
        <p id="foot_text_3"><a href="#"><img src="./img/16.png" alt=""><a href="#">中国</a></p>
      </div>
      <div class="col-xs-12 col-sm-10 col-sm-offset-1">
        <p id="foot_text_4">京公安网安备 11010502008968 京ICP备<a href="3"> 10214630 </a></p>
      </div>
    </div>
  </footer>
</body>
<script src="./js/bootstrap.min.js" charset="utf-8"></script>
<script type="text/javascript">
  $('.show').click(function() {
    if ($('.show img').attr('sh') == 'true') {
      $('.ac-gn-item-menu').slideDown(1000);
      $('.show img').attr('sh', 'false');
      $('.show img').attr('src', './img/hide.png')
      $('#banner-wrap').css('background', 'black');
      $('#ac-gn-bag').css('display', 'none');
      $('.mdzz').attr('src', './img/happle.PNG');
    } else {
      $('.ac-gn-item-menu').slideUp(1000);
      $('.show img').attr('sh', 'true');
      $('.show img').attr('src', './img/show.png');
      $('#banner-wrap').css('background', '#333');
      $('#ac-gn-bag').css('display', 'block');
      $('.mdzz').attr('src', './img/apple.PNG');
    }
  });
  $('#ac-gn-bag').click(function() {
    if ($('.ac-gn-bag-login').css('display') == 'none') {
      $('.ac-gn-bag-login').css('display', 'block');
    } else {
      $('.ac-gn-bag-login').css('display', 'none');
    }
  });

  $('.btn-primary').click(function(){
    // console.log($('#chec'));
    if($('#chec').is(':checked')){
      setCookie('username',$('#exampleInputEmail3').val(),7);
      setCookie('password',$('#exampleInputPassword3').val(),7);
      $('#exampleInputEmail3').val(getCookie('username'));
      $('#exampleInputPassword3').val(getCookie('password'));
      $('.kk1').text('已登陆');
    }else{
      $('#exampleInputPassword3').val('');
    }
  });
  if(getCookie('username')!=''&&getCookie('password')!=''){
    $('.kk1').text('已登陆');
    $('#exampleInputEmail3').val(getCookie('username'));
    $('#exampleInputPassword3').val(getCookie('password'));
  }else{
    $('.kk1').text('登陆');
  }
</script>

</html>
